/* 视频背景 */
#background{
    position: absolute;  //绝对定位
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;  //auto：无特定宽度值，取决于其它属性值
    height: auto;  //auto：无特定宽度值，取决于其它属性值
    z-index: -1000;  //设置元素的层叠顺序
}

/* banner */
.banner{
    background: transparent;
    overflow: hidden;  //hidden：隐藏溢出容器的内容且不出现滚动条
    padding-bottom: 5em;
    //em：相对长度单位。相对于当前对象内文本的字体尺寸
    //padding：内边距  （padding：上 右 下 左）

    .box{
        width: 100%;
        text-align: center;
        padding-top: 10em;  //padding：内边距  （padding：上 右 下 左）

        .title{
            font-family: OSLight;
            font-size: 4em;
            text-transform: uppercase;  //定义仅有大写字母
            color: #999;

            span{
                font-family: OSBold;
                color: #fcac45;
            }
        }

        .desc{
            font-family: OSLight;
            color: #999;
            font-size: 1.5em;
            margin-bottom: 12em;  //margin：外边距  （margin：上 右 下 左）

            span{
                font-family: OSBold;
                color: #c3c3c3;
            }
        }

        .more{
            a{
                width: 3em;
                height: 3em;
                line-height: 2.5em;  //line-height：用来指定块容器内行框的最小高度
                text-align: center;
                border: 2px solid #c3c3c3;
                border-radius: 100%;  //设置圆角边框
                color: #c3c3c3;
                transition: all linear .3s;  //过渡样式

                &:hover{
                    box-shadow: 0px 0px 5px 2px #c3c3c3;
                    transform: translateY(-10px);  //变换样式
                }
            }
        }
    }

    @media screen and (max-width: 720px){
        .box{
            .title{
                font-size: 2.2em;
                margin-bottom: .5em;
            }

            .desc{
                font-size: 1.2em;
                margin-bottom: 15vh;  //vh：相对于视口的高度。视口被均分为100单位的vh
            }
        }
    }
}

/* about */
.about{
    padding: 5em 0em;  //padding：内边距  （padding：上下 左右）
    background: #fff;
    overflow: hidden;  //hidden：隐藏溢出容器的内容且不出现滚动条

    .container{
        display: flex;  //flex：将对象作为弹性伸缩盒显示

        .left{
            //不缩放
            flex-shrink: .2;
            //flex-shrink 属性固定在相同的容器中，项目相对于其余弹性项目的收缩量
            //注释：如果元素不是弹性项目，则 flex 属性无效
        }

        .right{
            .info{
                margin-bottom: 2em;  //margin：外边距

                .short{
                    font-family: OSLight;
                    font-size: 1.7em;
                    text-transform: uppercase;  //定义仅有大写字母
                    display: inline-block;  //指定对象为内联块元素
                }

                .title{
                    font-size: 2.7em;
                    text-transform: uppercase;  //定义仅有大写字母
                    font-family: OSLight;
                    white-space: nowrap;
                    //white-space 属性设置如何处理元素内的空白
                    //nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
                    text-overflow: ellipsis;
                    //text-overflow 属性规定当文本溢出包含元素时发生的事情
                    //ellipsis：显示省略符号来代表被修剪的文本

                    span:first-child{
                        display: inline-block;  //指定对象为内联块元素
                        height: 1.5em;
                        line-height: 1em;  //line-height：用来指定块容器内行框的最小高度
                        border-bottom: 4px solid #fcac45;
                    }

                    span:last-child{
                        font-family: OSBold;
                    }
                }
            }

            .content{
                margin-bottom: 1.5em;  //margin：外边距
                font-family: OSLight;
                color: #6c6c6c;
                font-size: 1.4em;
                line-height: 1.5em;  //line-height：用来指定块容器内行框的最小高度
            }

            .newlist{
                margin-bottom: 2em;  //margin：外边距

                li{
                    font-size: 1.3em;
                    height: 2em;
                    line-height: 2em;  //line-height：用来指定块容器内行框的最小高度

                    span:first-child{
                        top: 2px;
                    }

                    span:nth-child(2){
                        font-family: OSBold;
                    }

                    span:last-child{
                        font-family: OSLtalic;
                        color: #5a5a5a;
                    }
                }
            }

            .work_btn{
                width: 14em;
                height: 3.5em;
                line-height: 3.5em;
                text-align: center;
                border: 1px solid #7f7f7f;
                border-radius: 2px;
                display: flex;  //flex：将对象作为弹性伸缩盒显示
                justify-content: center;  //设置弹性盒元素水平方向的排列方式
                cursor: pointer;
                //cursor 属性规定要显示的光标的类型（形状）
                //pointer：光标呈现为指示链接的指针（一只手）
                transition: all linear .3s;  //过渡样式

                &:hover{
                    transform: translateY(-10px);
                    box-shadow: 0px 0px 13px 2px #7f7f7f;
                }

                .icon{
                    img{
                        margin-top: -2px;;
                    }
                }

                a{
                    color: #7f7f7f;
                    text-transform: uppercase;  //定义仅有大写字母
                    font-size: 1em;
                    margin-left: .5em;
                }
            }
        }
    }

    /* x <= 1200 */
    @media screen and (max-width: 1200px){
        .left{
            display: none;  //none：此元素不会被显示
        }
    }

    @media screen and (max-width: 500px){
        padding-left: 1em;

        .container{
            .right{
                width: 95%;

                .info{
                    .title{
                        font-size: 1.6em;
                        white-space: normal;
                        //white-space 属性设置如何处理元素内的空白
                        //normal：默认。空白会被浏览器忽略
                    }
                }

                .newlist{
                    li{
                        height: auto;
                        line-height: 2em;
                        font-size: 1.1em;
                    }
                }
            }
        }
    }
}

/* team */
.team{
    background: #070707;
    padding: 3em 0em 5em;  //padding：内边距 （padding: 上 右左 下）
    text-align: center;

    .subject{
        color: #fff;
        font-size: 3em;
        text-transform: uppercase;
        //text-transform 属性控制文本的大小写
        //uppercase：定义仅有大写字母
        font-family: OSLight;
        letter-spacing: 2px;  //letter-spacing 属性增加或减少字符间的空白（字符间距）
        background: url('../images/team_title_bg.png') no-repeat center bottom;
        //background-repeat 属性设置是否及如何重复背景图像 | no-repeat：背景图像将仅显示一次
        line-height: 3em;  //line-height 属性设置行间的距离（行高）
        margin-bottom: 3em;  //外边距

        span{
            font-family: OSBold;
        }
    }

    .list{
        display: flex;
        justify-content: space-between;
        //justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时
        //space-between：项目在行与行之间留有间隔
        margin-bottom: 5em;
        display: none;
        
        .item{
            width: 23%;

            .thumb{
                width: 10em;
                height: 10em;
                margin: 0 auto;  //auto：浏览器计算外边距
                border: 4px solid white;
                border-radius: 100%;  //圆角边框
                overflow: hidden;
                //overflow 属性规定当内容溢出元素框时发生的事情
                //hidden：内容会被修剪，并且其余内容是不可见的
                margin-bottom: 2em;

                img{
                    width: 100%;
                    height: 100%;
                }
            }

            .content{
                font-size: 1.2em;
                color: #fff;
                
                .title{
                    font-family: OSBold;
                }

                .info{
                    font-family: OSLight;
                    margin-bottom: 2em;
                }

                .desc{
                    font-family: OSLight;
                }
            }
        }
    }

    input[name='team']{
        display: none;
    }

    input[name='team']:checked + .list{
        display: flex;
    }

    .more{
        width: 100%;
        text-align: center;

        label{
            display: inline-block;  //指定对象为内联块元素
            width: 1em;
            height: 1em;
            cursor: pointer;
            //cursor 属性规定要显示的光标的类型（形状）
            //pointer：光标呈现为指示链接的指针（一只手）
            background: #fff;
            transition: all linear .3s;  //过渡样式
            margin-right: .5em;

            &:hover{
                background: #fcac45;
            }
        }
    }
    
    // x <= 600
    @media screen and (max-width:600px){
        .subject{
            font-size: 2em;
            line-height: 4em;  //line-height 属性设置行间的距离（行高）
        }

        .list{
            display: block;
            //display 属性规定元素应该生成的框的类型
            //block：此元素将显示为块级元素，此元素前后会带有换行符
            text-align: left;
            display: none;

            .item{
                width: 100%;
                display: flex;  //flex：将对象作为弹性伸缩盒显示
                margin-bottom: 2em;

                .thumb{
                    flex-shrink: 0;  //flex-shrink 属性固定在相同的容器中，项目相对于其余弹性项目的收缩量
                    margin: 0;  //外边距
                    margin-right: 2em;
                }

                .content{
                    display: flex;  //flex：将对象作为弹性伸缩盒显示
                    flex-wrap: wrap;
                    //flex-wrap 属性规定弹性项目是否应换行
                    //wrap：规定弹性项目会在需要时换行

                    div{
                        width: 100%;
                        text-align: left;
                    }

                    .info{
                        margin-bottom: 0;
                    }
                }
            }

            .item:last-child{
                margin-bottom: 0;
            }
        }
        
        input[name='team']{
            display: none;
        }
    
        input[name='team']:checked + .list{
            display: block;
        }
    }
}

/* services */
.services{
    background: #fff;
    padding: 3em 0em 2em;  //内边距

    .subject{
        text-align: center;
        color: #000;
        font-size: 3em;
        text-transform: uppercase;  //定义仅有大写字母
        font-family: OSLight;
        letter-spacing: 2px;  //letter-spacing 属性增加或减少字符间的空白（字符间距）
        background: url('../images/team_title_bg.png') no-repeat center bottom;
        line-height: 3em;
        margin-bottom: 1em;

        span{
            font-family: OSBold;
        }
    }

    .desc{
        width: 80%;
        margin: 0 auto;
        margin-bottom: 5em;
        font-family: OSLtalic;
        text-align: center;
        font-size: 1.2em;
        line-height: 1.7em;
        color: #6c6c6c;
    }

    .list{
        display: flex;
        justify-content: space-between;
        //justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时
        //space-between：项目在行与行之间留有间隔
        margin-bottom: 3em;

        .item{
            width: 23%;

            .thumb{
                width: 10em;
                height: 10em;
                margin: 0 auto;  //auto：浏览器计算外边距
                border: 4px solid #fcac45;
                border-radius: 100%;  //圆角边框
                overflow: hidden;
                //overflow 属性规定当内容溢出元素框时发生的事情
                //hidden：内容会被修剪，并且其余内容是不可见的
                margin-bottom: 2em;

                img{
                    width: 100%;
                    height: 100%;
                }
            }

            .content{
                font-size: 1.2em;
                color: rgb(10, 10, 10);
                
                .title{
                    font-family: OSBold;
                    text-align: center;
                    font-size: 20px;
                    text-transform: uppercase;  //定义仅有大写字母
                    margin-bottom: 1em;
                }

                .info{
                    font-family: OSLight;
                    text-align: center;
                    margin-bottom: 1em;
                }
            }
        }
    }

    // x <= 600
    @media screen and (max-width:600px){
        .subject{
            font-size: 2em;
            line-height: 4em;
        }

        .list{
            display: block;
            text-align: left;

            .item{
                width:100%;
                display: flex;
                margin-bottom:2em;

                .thumb{
                    flex-shrink: 0;
                    margin:0;
                    margin-right:2em;
                }

                .content{
                    display: flex;
                    flex-wrap: wrap;

                    div{
                        width:100%;
                        text-align: left;
                    }

                    .info{
                        margin-bottom: 0;
                    }
                }
            }

            .item:last-child{
                margin-bottom: 0;
            }
        }
    }
}

/* clients */
.clients{
    background: #070707;
    padding: 4em 0em 5em;

    .subject{
        text-align: center;
        text-transform: uppercase;
        font-size: 2em;
        background: url('../images/team_title_bg.png') no-repeat center bottom;
        font-family: OSLight;
        color: #fff;
        padding-bottom: 1.5em;
        margin-bottom: 3em;

        span{
            font-family: OSBold;
        }
    }

    .content{
        display: none;
        text-align: center;
        color: #fff;
        font-size: 1.2em;
        width: 100%;
        margin-bottom: 2em;

        .desc{
            width: 80%;
            margin: 0 auto;
            margin-bottom: 3em;
        }
    }

    input[name='client']{
        display: none;
    }

    input[name='client']:checked + .content{
        display: inline-block;
    }

    .more{
        text-align: center;

        label{
            display: inline-block;
            width: 1em;
            height: 1em;
            background: #fff;
            cursor: pointer;
            margin-right: .5em;
            transition: all linear .3s;
        }

        label:hover{
            background: #fcac45;
        }
    }

    #client1:checked ~ .more label:nth-child(1),
    #client2:checked ~ .more label:nth-child(2),
    #client3:checked ~ .more label:nth-child(3){
        background: #fcac45;
    }
}

/* work */
.work{
    background: #fff;
    padding: 3em 0em 5em;  //内边距

    .subject{
        text-align: center;
        color: #000;
        font-size: 3em;
        text-transform: uppercase;  //定义仅有大写字母
        font-family: OSLight;
        letter-spacing: 2px;  //letter-spacing 属性增加或减少字符间的空白（字符间距）
        background: url('../images/team_title_bg.png') no-repeat center bottom;
        line-height: 3em;
        margin-bottom: 1em;

        span{
            font-family: OSBold;
        }
    }

    .desc{
        width: 80%;
        margin: 0 auto;
        margin-bottom: 5em;
        font-family: OSLtalic;
        text-align: center;
        font-size: 1.2em;
        line-height: 1.7em;
        color: #6c6c6c;
    }

    .box{
        .top{
            display: flex;
            justify-content: space-between;
            align-content: center;
            align-items: center;
            margin-bottom: 1.5em;

            .left{
                font-family: OSBold;
                text-transform: uppercase;
                font-size: 1.3em;
            }

            .right{
                display: flex;
                // width:40%
                justify-content: space-around;

                a{
                    display: inline-block;
                    font-size: 1.2em;
                    text-transform: capitalize;
                    color: #6c6c6c;
                    border-right: 1px solid #6c6c6c;
                    padding: 0em 1em;

                    &:last-child{
                        border-right: 0px;
                    }
                }
            }

            .cate{
                display: none;
                margin-right: 1em;
            }
        }

        .list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .item{
                width: 23%;
                margin-bottom: 2em;
                position: relative;
                overflow: hidden;

                .text{
                    position: absolute;
                    left: 0;
                    top: -100%;
                    width: 98%;
                    height: 100%;
                    background-color: rgba(34, 34, 34, .9);
                    transition: all linear .3s;
                    padding: 4em 1em;
                    text-align: center;
                    
                    p:nth-of-type(1){
                        font-size: 1.5em;
                        color: #fff;
                        font-family: OSBold;
                        text-transform: uppercase;
                    }

                    p:nth-of-type(2){
                        font-size: 1em;
                        color: #b2b2b2;
                        font-family: OSLight;
                        margin-bottom: 1.5em;
                    }

                    .add{
                        width: 3em;
                        height: 3em;
                        color: #fcac45;
                        border: 2px solid #fcac45;
                        border-radius: 100%;
                        line-height: 2.6em; 
                        margin: auto;
                        transition: all linear .3s;

                        &:hover{
                            box-shadow: 0px 0px 5px 2px #f5b25b;
                            transform: translateY(-10px);
                        }
                    }
                }
                
                &:hover .text{
                    top: 0;
                }

            }
        }
    }

    @media screen and (max-width:600px){
        .subject{
            font-size: 2em;
            line-height: 4em;
        }

        .box{
            .top{
                .left{
                    margin-left: 1em;
                }

                .right{
                    display: none;
                    width: 100%;
                    justify-content: space-between;

                    a{
                        display: inline-block;
                        text-align: center;
                        width: 24%;
                        padding: 0;
                    }
                }

                .cate{
                    display: inline-block;
                }
            }

            .list{
                .item{
                    width: 45%;

                    .text{
                        padding: 1em 0 !important;
                        
                        p:nth-of-type(1){
                            font-size: .9em !important;
                        }

                        p:nth-of-type(2){
                            margin-bottom: 2em !important;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:450px){
        padding-top: 3em;

        .subject{
            font-size: 1.5em;
            line-height: 4em;
        }

        .box{
            .top{
                .left{
                    margin-left: 1em;
                }
                
                .right{
                    overflow: hidden;
                    
                    a{
                        font-size: 1em;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            .list{
                padding: 0 1em;

                .text{
                    padding: 1em 0 !important;
                    
                    p:nth-of-type(1){
                        font-size: 1em !important;
                    }

                    p:nth-of-type(2){
                        margin-bottom: 2em !important;
                    }
                }
            }
        }
    }

    @media screen and (max-width:350px){
        padding-top: 3em;

        .subject{
            font-size: 1.5em;
            line-height: 4em;
        }

        .box{
            .top{
                .left{
                    margin-left: 1em;
                }
                
                .right{
                    overflow: hidden;
                    
                    a{
                        font-size: 1em;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            .list{
                padding: 0 1em;

                .text{
                    position: absolute;
                    left: 0;
                    top: -120%;
                    padding: 1em 0 !important;
                    
                    p:nth-of-type(1){
                        font-size: 1em !important;
                    }

                    p:nth-of-type(2){
                        margin-bottom: 2em !important;
                    }
                }
            }
        }
    }
}

/* testimonials */
.testimonials{
    background: #070707;
    padding: 4em 0em 5em;

    .subject{
        text-align: center;
        text-transform: uppercase;
        font-size: 2em;
        background: url('../images/team_title_bg.png') no-repeat center bottom;
        font-family: OSLight;
        color: #fff;
        padding-bottom: 1.5em;
        margin-bottom: 3em;

        span{
            font-family: OSBold;
        }
    }

    .content{
        display: none;
        text-align: center;
        color: #fff;
        font-size: 1.2em;
        width: 100%;
        margin-bottom: 2em;

        .desc{
            width: 80%;
            margin: 0 auto;
            margin-bottom: 3em;
        }

        .name{
            font-family: OSLight;
        }
    }

    input[name='testimonial']{
        display: none;
    }

    input[name='testimonial']:checked + .content{
        display: inline-block;
    }

    .more{
        text-align: center;

        label{
            display: inline-block;
            width: 1em;
            height: 1em;
            background: #fff;
            cursor: pointer;
            margin-right: .5em;
            transition: all linear .3s;
        }

        label:hover{
            background: #fcac45;
        }
    }

    #testimonial1:checked ~ .more label:nth-child(1),
    #testimonial2:checked ~ .more label:nth-child(2),
    #testimonial3:checked ~ .more label:nth-child(3){
        background: #fcac45;
    }
}

/* contact */
.contact{
    background: #fff;
    padding: 3em 0em 7em;

    .subject{
        font-size: 2em;
        text-transform: uppercase;
        background: url('../images/team_title_bg.png') no-repeat center bottom;
        padding-bottom: 1.5em;
        color: #000;
        font-family: OSLight;
        margin-bottom: 2em;
        text-align: center;

        span{
            font-family: OSBold;
        }
    }

    .desc{
        width: 80%;
        margin: 0 auto;
        font-family: OSLtalic;
        font-size: 1.2em;
        line-height: 1.5em;
        margin-bottom: 3em;
        text-align: center;
    }

    .content{
        width: 80%;
        margin: 0 auto;

        .info{
            display: flex;
            justify-content: space-between;
            margin-bottom: 1.5em;

            .left,.right{
                width: 48%;

                .top{
                    span{
                        font-size: 1.3em;
                        text-transform: capitalize;
                        color: #636363;
                    }

                    sup{
                        color: #dd1111;
                        font-size: 1.1em;
                    }
                }

                .bottom{
                    input{
                        width: 100%;
                        height: 2em;
                        line-height: 2em;
                        border: 1px solid #636363;
                        font-size: 1.2em;
                    }
                }
            }
        }

        .message{
            margin-bottom: 1.5em;

            .top{
                span{
                    font-size: 1.3em;
                    text-transform: capitalize;
                    color: #636363;
                }

                sup{
                    color: #dd1111;
                    font-size: 1.1em;
                }
            }

            .bottom{
                textarea{
                    width: 100%;
                }
            }
        }

        .send{
            text-align: right;

            button{
                width: 10em;
                height: 2em;
                line-height: 2em;
                text-align: center;
                color: #fff;
                background: #fcac45;
                font-size: 1.1em;
                border: 0px;
                transition: all linear .3s;

                &:hover{
                    transform: translateY(-10px);
                    box-shadow: 0px 0px 7px 1px #636363;
                }
            }
        }
    }

    @media screen and (max-width:500px){
        .content{
            .info{
                flex-wrap: wrap;
                margin-bottom: 0em;

                .left,.right{
                    width: 100%;
                    margin-bottom: 1em;
                }
            }

            .send{
                text-align: center;
            }
        }
    }
}